<script setup>
import { ref, onMounted, getCurrentInstance, reactive } from "vue";
import { mainStore } from "../../store/index";
import { useRoute } from 'vue-router';
import $fetch from "../../utils/request";
import Pagination from "../../components/Pagination.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../../utils/api";
const { proxy } = getCurrentInstance();
const { $mapevent } = proxy;
const store = mainStore();
const route = useRoute();
let uavList = ref(null);
let pagingGather = reactive({
    Page: 1,
    pageSize: 10,
    total: 0,
});
let informationHub = reactive({show:false,active:null})
onMounted(() => {
    quest_list();
});

function quest_list() {
    $fetch("/mapvector/list", {}, "post", localStorage.getItem("token")).then(
        (res) => {
            //无人机
            uavList.value = res.data;
            pagingGather.total = res.data.count;
        }
    );
}
/**
 * 分页组件
 * @param {*} n
 */
const onwards = (n) => {
    pagingGather.Page = n.Page;
    pagingGather.pageSize = n.pageSize;
    quest_list();
};

function modify(target) {
    store.changePunctuation('show',true)
}
async function deleteLayer(target) {
    ElMessageBox({
        title: "提示",
        message: "是否确定删除该标绘？",
        showCancelButton: true,
        confirmButtonText: "确定",
        confirmButtonClass: "danger",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
            if (action === "confirm") {
                instance.confirmButtonLoading = true;
                instance.confirmButtonText = "等待...";
                api.plottingDelete(Number(target.type),target.id).then(res=>{
                    done();
                    setTimeout(() => {
                        instance.confirmButtonLoading = false;
                    }, 300);
                });
                
            } else {
                done();
            }
        },
    })
        .then(() => {
            ElMessage({
                type: "success",
                message: "删除成功！",
            });
            quest_list();
        })
        .catch((err) => {
            console.log(123, err);
            ElMessage({
                type: "info",
                message: "取消删除！",
            });
        });
}
const handleClose = () => {
    informationHub.show = false
    informationHub.active = null
};
function saveInformation () {
    informationHub.show = false
}
</script>
<template>
    <div id="uavList">
        <el-header>地图标绘</el-header>
        <el-table :data="uavList" border style="width: 100%">
            <el-table-column prop="id" label="id" width="54" />
            <el-table-column prop="name" label="名称" />
            <!-- <el-table-column prop="maptime" label="航飞日期" width="220" />
            <el-table-column prop="url" label="url地址" /> -->
            <el-table-column label="操作" width="160">
                <template #default="scope">
                    <el-button
                        type="warning"
                        size="small"
                        @click="modify(scope.row)"
                        >修改信息</el-button
                    >
                    <el-button
                        type="danger"
                        size="small"
                        @click="deleteLayer(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- <Pagination
            class="paging"
            :pagingGather="pagingGather"
            @onwards="onwards"
        ></Pagination> -->
    </div>
    <el-dialog
        id="layerGis"
        v-model="informationHub.show"
        title="信息编辑"
        draggable
        :close-on-click-modal="false"
    >
        <div>{{ informationHub.active }}</div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="saveInformation">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="less">
#uavList {
    height: 100%;
    width: 100%;
}
.el-overlay,.el-overlay-dialog {
    pointer-events: auto;
}
</style>
